<script>
    import "./index.css";
    import PageType from "./PageType";
    import BlueButton from "../../edit-components/BlueButton";
    import EditModel from "../../edit-components/EditModel";
    import {Dropdown,DropdownItem,DropdownMenu} from "element-ui";
    import {mapMutations, mapGetters} from "vuex";
    import {initEditComponentsList} from "../../helper/drag-plugin/initComponents";
    import CustPage from "./Model";//引进实体类
    import getId from "../../utils/initComponentsId";
    import CustPageUtil from "./helper";
    import Column from "../../edit-containers/EditIndex/Column/index";
    import ColumnList from "./selectList/index"
    import Toast from "../../edit-components/Toast";
    import initLinkedList from "../../utils/settings/initLinkedList";
    import handlePath from "../../utils/lxn/handlePath";
    import axios from "axios";
    import mergeRouter from "../../utils/settings/mergeRouter";
    import StoreOtherPage from "../../edit-components/StoreOtherPage"
    export default {
        props: {
            infoToast: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                currentType: "",//在弹出框中选择的页面类型
                currentTitle: "",//在弹出框中的标题
                custPageName: "",
                pageMapsData: "",//计算属性pageMaps的数据源
                isSorted: false, //默认是否排序
                handleType:'',//默认的类型是新增
                text:'新增页面',
                editTitle:"",
                item:{},
                checkGift:'',
                checkInter:'',
                targetItem:{},//用于存储目标门店信息
                originItem:{},//复制当前门店的当前页面的信息
                targetStoreTitle:'',
                originalLinkList:{},
                isSameStore: false,
                shareMainTitle:'',
                shareSubTitle:'',
                targetStoreMainName:'',
                targetStoreSubName:'',
                editShareMainTitle:'',
                editShareSubTitle:'',
            }
        },
        computed: {
            ...mapGetters("gw", [
                "getSpecialTemplate",
                "getSpecialTemplateParams"
            ]),
            pageArray() {
                let pageArray = [];
                if (!this.getSpecialTemplate.config) return pageArray;
                let arr = JSON.parse(JSON.stringify(this.getSpecialTemplate.config.pages));
                // console.log("getSpecialTemplate", arr);
                
                for (let item of this.getSpecialTemplate.config.pages) {
                    let pageItem = new CustPage(item);
                    pageArray.push(pageItem);
                }
                //为了防止删除页面时有时点不到对应的index,所以讲那些隐形页面全部放到数组的最后面
                if (this.isSorted) {
                    return pageArray;  
                } else {
                    this.isSorted = true;
                    return pageArray.filter(value =>{
                        return value.pageIsShow
                    }).sort((m, n) => {
                        let time1 = m.updateTime || m.createTime || 0;
                        let time2 = n.updateTime || n.createTime || 0;
                        return time2 - time1;
                    }).concat(pageArray.filter(value => {
                        return !value.pageIsShow
                     }));
                }
            },
            showTitle (){
                if (this.handleType ==='add'){
                    return '新增页面'
                }else {
                    return '编辑页面'
                }
            },
        },
        methods: {
            ...mapMutations([
			    "setCurrentTemplate",
		    ]),
            //显示弹框
            showEditModal(){
                this.handleType = 'add'
                this.$refs.EditModel.showCover();
            },
            editCurrentTitle(event) {
                this.currentTitle = event.target.value;
            },
            getEditCurrentTitle(event) {
                this.editTitle = event.target.value;
            },
            targetStoreTitleEvent(event){
                this.targetStoreTitle = event.target.value;
            },
            shareMain(event){
                this.shareMainTitle = event.target.value;
            },
            shareSub(event){
                this.shareSubTitle = event.target.value;
            },
            targetStoreMainNameEvent(event){
                this.targetStoreMainName = event.target.value;
            },
            targetStoreSubNameEvent(event){
                this.targetStoreSubName = event.target.value;
            },
            editShareMain(event){
                this.editShareMainTitle = event.target.value;
            },
            editShareSub(event){
                this.editShareSubTitle = event.target.value;
            },
            setAddPageType(type) {
                if (type) {
                    this.currentType = type;
                }
            },
            isContinueAddGiftPage(){
                this.pageArray.find((item,index)=>{
                   if(item.type ==='buyGiftCard'){
                       this.checkGift = 1
                   } 
                })
            },
            //判断当页面上已经有积分商城页面时，不让新增
            isContinueAddIntegraPage(){
                this.pageArray.find((item,index)=>{
                   if(item.type ==='IntegralBuy'){
                       this.checkInter =1
                   }
                })
            },
            //新增一条数据
           async addCustPage() {
                //校验数据合法性
                if (!this.currentType) {
                    this.infoToast("请选择页面类型");
                    return;
                }
                if (!this.currentTitle) {
                    this.infoToast("请输入页面名称");
                    return;
                }
                if (!this.shareMainTitle) {
                    this.infoToast("请输入分享主标题");
                    return;
                }
                if (!this.shareSubTitle) {
                    this.infoToast("请输入分享副标题");
                    return;
                }
                this.isContinueAddGiftPage()
                this.isContinueAddIntegraPage()
                if( this.checkGift ===1 && this.currentType ==="buyGiftCard" ){
                    this.infoToast("新建失败,礼品卡页面只能新建一条");
                    this.hideModel();
                    return
                }
                if((this.checkInter===1 && this.currentType ==="IntegralBuy")){
                    this.infoToast("新建失败,积分商城页面只能新建一条")
                    this.hideModel();
                    return
                }
                let id = getId();
                let newCustPageObj = {
                    id,
                    path: id,
                    type: this.currentType,
                    title: this.currentTitle,
                    createTime: new Date().getTime(),
                    updateTime: new Date().getTime(),
                    mainTitle: this.shareMainTitle,
                    subTitle: this.shareSubTitle,
                    // state:0//发布状态，默认为0未发布
                    state: (this.currentType==='IntegralBuy'||this.currentType==='buyGiftCard')?1:0,
                }
                if(this.currentType === 'IntegralBuy'){
                    newCustPageObj.path = 'IntegralBuy'
                }else if(this.currentType === 'buyGiftCard'){
                    newCustPageObj.path = 'buyGiftCard'
                }
                this.pageArray.unshift(new CustPage(newCustPageObj));
                //清理数据
                this.currentType = "";
                this.currentTitle = "";
                this.shareMainTitle = "";
                this.shareSubTitle = "";
                await this.hideModel();
                //保存到数据库
                setTimeout(()=>{
                    CustPageUtil.insert(this, this.pageArray);
                },500)
                
            },
            //删除一条数据
            deleteCustPage(val,index) {
                this.pageArray.splice(index, 1);//从index位置开始删除，删除当前一条数据
                CustPageUtil.delete(this, this.pageArray);
            },
            //编辑一条数据
            editCustPage(index) {
                //弹出编辑框
                this.showEditModal()
                this.handleType = 'edit'
                //获取编辑的当前项
                let pageItem = this.pageArray[index];
                this.item = pageItem
                //进入编辑模式
                //对可编辑的属性进行赋值
                this.editTitle = pageItem.title;
                this.editShareMainTitle = pageItem.mainTitle;
                this.editShareSubTitle = pageItem.subTitle;
            },
            confirmEditCustPage(index){
                this.hideModel();
                this.item.setTitle(this.editTitle);
                this.item.setUpdateTime(new Date().getTime());
                this.item.setMainTitle(this.editShareMainTitle);
                this.item.setSubTitle(this.editShareSubTitle);
                CustPageUtil.update(this, this.pageArray);
            },
            cancelAddPage(){
                this.$refs.EditModel.hideCover();
            },
            hideModel(){
                this.$refs.EditModel.hideCover();
            },
            showEmodel(){
                this.$refs.MEditModel.showCover();
            },
            /**
             * 获取格式化后的时间
             */
            getDate(time) {
                let date;
                if (time) {
                    date = new Date(time);
                } else {
                    date = new Date();
                }
                return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1:'0' + (date.getMonth() + 1)}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
            },
            getDataInterval(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1:'0' + (date.getMonth() + 1)}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
				} 
            },
            //点击装修模板页面的时候，判断是否需要把定时发布的页面合并到原有路径上
            /**
             * @return {Object}
             */
            needMerge(custPage) {
                console.log(custPage)
                let result = {
                    needMerge: false,
                    path: custPage.path
                }
                if(custPage.type==='buyGiftCard' || custPage.type==='IntegralBuy'){
                    return result
                }
                //该页面没有设置定时发布
                if (!custPage.intervalTime) {
                    //如果还没到发布时间，但是已经取消了定时发布，这时候也是要进行合并操作的
                    let Sign = this.$store.getters["gw/getSpecialTemplate"][custPage.path].config.MarkSign
                    if(Sign && Sign.newPath){
                        result.needMerge = true;
                    }
                    return result;
                }
                //预览已经在运行中的定时发布的页面
                if (new Date(custPage.intervalTime).getTime() > new Date().getTime()) {
                    //设置了定时时间，但是还没超过现在的时间，此时也是需要进入新页面（相当于预览）
                    // let MarkSign = JSON.parse(this.$store.getters["gw/getSpecialTemplateParams"].tpConfig)
                    // let mrakObj = MarkSign[custPage.path].config.MarkSign
                    let mrakObj = this.$store.getters["gw/getSpecialTemplate"][custPage.path].config.MarkSign
                    result.path = mrakObj.newPath
                } else {
                    result.needMerge = true;
                }
                return result;
            },
            navigate(type, path) {
                console.log('打印path',path)
               if (type==='buyGiftCard') {
                    this.$router.push({
                        path: "EditMain/"+ 'buyGiftCard',
                        query: {env: "edit"}
                    });
                } else if (type==='IntegralBuy') {
                    this.$router.push({
                        path: "EditMain/"+'IntegralBuy',
                        query: {env: "edit"}
                    });
                } else {
                    this.$router.push({
                        path: "EditMain/"+ path,
                        query: {env: "edit"}
                    });
                }
            },
            /**
             * routeName, type, index
             */
            decorationPage(custPage, routeName, type, index) {
                //第一步：初始化window.manifest
                //拿到specialTemplate里面的组件结构
                /**
                 * _manifest:
                 * {
                 *      config:{}
                 *      main:{}
                 *      header:{}
                 *      footer:{}
                 * }
                 */
                let _manifest = this.$store.getters["gw/getSpecialTemplate"] || {};
                console.log("打印manifest", _manifest);
                
                window.manifest = initLinkedList({..._manifest});
                //第一步判断当前的item是否有定时发布
                let result = this.needMerge(custPage);
                let path = result.path;
                if (result.needMerge) {
                    //进行合并操作
                    //1 新页面赋值给老页面
                    //获取新页面的path
                    let newPath
                    if(window.manifest[path].config && window.manifest[path].config.MarkSign){
                        newPath = window.manifest[path].config.MarkSign.newPath
                    }
                    if(newPath){
                        //赋值
                        window.manifest[path] = window.manifest[newPath]
                        for(let key in window.manifest){
                            //2 把新页面干掉
                            delete window.manifest[newPath]
                        }
                        for(let key in window.manifest[path].config){
                            //3 消除老页面的标志
                            delete window.manifest[path].config.MarkSign
                        }
                        //4 保存到数据库
                        this.updateDomTreeToDB(() => {
                            console.log("保存成功");
                            }, () => {
                            console.log("保存失败");
                        })
                    }
                }
                //第二步：保存currentTemplateParams，后面请求接口会用到
                let _specialTemplateParams = this.$store.getters["gw/getSpecialTemplateParams"] || {}
                this.setCurrentTemplate(_specialTemplateParams);
                initEditComponentsList({componentName: ""})
                let pageItem = this.pageArray[index]
                //跳转页面
                this.navigate(custPage.type, path);
            },
            typeRender(val){
                if(val==='buyGiftCard'){
                    return '购买礼品卡页面'
                }else if(val==='IntegralBuy'){
                    return '积分商城页面'
                }else {
                     return '专题活动'
                }
            },
            copyCustPage(item){
                this.originItem = item
                this.$refs.CopyModel.showCover();
                // this.originalLinkList = window.manifest[this.originItem.path]
                this.originalLinkList  = this.$store.getters["gw/getSpecialTemplate"][this.originItem.path] || {}
            },
            shopChangeCopy(e) {
                //拿到目标门店的信息
                this.targetItem = e
                if (this.targetItem.name === localStorage.getItem('storeName')) {
                    this.infoToast('页面无法复制到本门店，请选择其他门店');
                    this.isSameStore = true
                }
                this.$store.commit("lxn/setstoreCodeIndex", this.targetItem.eqIndex)
            },
            confirmCopyPage(){
                if(this.isSameStore) return
                if( Object.keys(this.targetItem).length===0){
                    this.infoToast("请选择目标门店");
                    return
                } 
                if (this.targetStoreTitle==='') {
                    this.infoToast("请输入页面名称");
                    return;
                }
                if (this.targetStoreMainName==='') {
                    this.infoToast("请输入分享主标题");
                    return;
                }
                if (this.targetStoreSubName==='') {
                    this.infoToast("请输入分享副标题");
                    return;
                }
                //选择的目标门店信息
                let storeCode = localStorage.getItem("storeCode")
                // let _orginDom = window.manifest[this.originItem.path]
                console.log("originalLinkList",this.originalLinkList)
                let _orginDom = this.originalLinkList
                let headerList = _orginDom.header
                let mainList = _orginDom.main
                let currentHeader = headerList.head;
                let current = mainList.head;
                let arr = []
                let arr1 = []
                let finished = false;
                while (currentHeader) {
                    let ComponentId = currentHeader.element.id
                    arr1.push(ComponentId)
                    currentHeader = currentHeader.next;
                    // if (!current && !finished) {
                    //     finished = true;
                    //     current = headerList.head;
                    // }
                }
                while (current) {
                    let ComponentId = current.element.id
                    arr.push(ComponentId)
                    current = current.next
				}
                //调用复制页面的接口
                let url = api.goods_host + '/resourceConfig/resource/replications/' + storeCode + '/'+ this.targetItem.storeCode;
                let params = {'relGroupList':arr.concat(arr1)}
				let options = {
					url: url,
                    method: 'post',
                    data:params,
                    headers: {sessionId: getCookie("sessionId")}
                };
				axios(options).then(async (res) => {
                    if(res.status === 200 && res.data.returnCode === 1){
                        this.$refs.CopyModel.hideCover();
                        
                        //调用
                     await this.copyInfoToOtherStore()
                        this.infoToast('复制成功')
                        this.targetStoreTitle = ''
                        this.targetStoreMainName =''
                        this.targetStoreSubName = ''

                    } else{
                        this.$refs.CopyModel.hideCover();
                        this.infoToast('复制失败,'+ res.data.msg)
                        this.targetStoreTitle = ''
                        this.targetStoreMainName =''
                        this.targetStoreSubName = ''
                    }
				})
            },
            //复制页面时向目标门店中动态添加一条数据
            copyInfoToOtherStore(){
                let id = getId();
                let newCustPageObj = {
                    id : id,
                    path: id,
                    type: this.originItem.type,//原页面类型
                    title: this.targetStoreTitle,//
                    createTime: new Date().getTime(),
                    updateTime: new Date().getTime(),
                    state: this.originItem.state,
                    mainTitle: this.targetStoreMainName,
                    subTitle: this.targetStoreSubName
                }
                //给目标门店的pageArray动态添加一条数据
                console.log("打印this.pageArray",this.pageArray)
                this.pageArray.unshift(new CustPage(newCustPageObj));
                //把原门店页面的数据推到新门店下
                this.getSpecialTemplate.config.pages.push(newCustPageObj)
                this.getSpecialTemplate[newCustPageObj.id] = this.originalLinkList
                this.getSpecialTemplateParams.tpConfig = JSON.stringify(this.getSpecialTemplate)
                //保存到数据库
                CustPageUtil.insert(this, this.pageArray);
            },
            cancelCopyPage(){
                this.$refs.CopyModel.hideCover();
            }
        },
        components: {
            PageType,
            "blue-btn": BlueButton,
            "edit-model":EditModel,
            "el-dropdown":Dropdown,
            "el-dropdown-item":DropdownItem,
            "el-dropdown-menu":DropdownMenu,
            "m-column": Column,
            "m-toast": Toast,
            "m-column-list":ColumnList,
            StoreOtherPage
        },
        watch: {
            custPageName(newVal) {
                this.$store.commit("gw/setAddPageTitle", newVal);
            },

        },
        render() {
            let trList = [];
            this.pageArray.filter(value => {
                return value.pageIsShow
            }).forEach((value, index) => {
                trList.push(
                    (
                        <tr class="table-tr" key={"table-tr" + index}>
                            <td>{value.title}</td>
                            <td>{this.typeRender(value.type)}</td>
                            <td>{value.updateTime ? this.getDate(value.updateTime) : ""}</td>
                            <td>
                            {
                                value.intervalTime && (new Date(value.intervalTime).getTime()>new Date().getTime())?
                                <div><span class="interval-time">{this.getDataInterval(value.intervalTime)}</span><span>定时发布</span></div>:
                                <div>{value.state ===0?'未发布':'已发布'}</div>
                            }
                            </td>
                            <td><input type="text" style="text-align:center;padding:0 10px;" value={location.host + '/#/EditMain/'+ value.path + '?env=edit'}/></td>
                            <td class="handle">
                                <blue-btn text="装修页面" class="btn-group" clickEvent={() =>this.decorationPage(value,value.id,value.type,index)}/>
                                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        更多
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        {
                                            value.type === 'buyGiftCard' || value.type ==='IntegralBuy'?
                                            <div></div>:
                                            <el-dropdown-item nativeOnClick={() => this.copyCustPage(value,index)}>复制页面</el-dropdown-item>
                                        }
                                        <el-dropdown-item nativeOnClick={() => this.editCustPage(index)}>重命名页面</el-dropdown-item>
                                        <el-dropdown-item nativeOnClick={() => this.deleteCustPage(value,index)}>删除页面</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </td>
                        </tr>
                    )
                )
            });
            return (
                <div class="totalPage">
                        <m-column ></m-column>
                        <div style="display: flex">
                             <StoreOtherPage></StoreOtherPage>
                            <blue-btn clickEvent={this.showEditModal} text='新增页面' style="text-align:right;width:50%"></blue-btn>
                        </div>
                   
                    <div class="definitePage" style="max-height:440px;overflow-y:scroll">
                            <table class="sv-table">
                                <tr class="table-th">
                                    <th>页面名称</th>
                                    <th>页面类型</th>
                                    <th>更新时间</th>
                                    <th>状态</th>
                                    <th>页面链接</th>
                                    <th>操作</th>
                                </tr>
                                {trList}
                            </table>
                    </div>
                    <edit-model ref="EditModel"  title={this.showTitle}>
                        <div class="add-template-box slot-banner" slot="main">
                            {
                                this.handleType ==='add'?
                            <div class="page-type">
                                <p class="eidt-slot-title">
                                    <span class="required">*</span>页面类型
                                </p>
                                <page-type getPageType={this.setAddPageType} />
                            </div>:
                            <div></div>
                            }
                            <div class="page-name">
                                <p class="eidt-slot-title">
                                    <span class="required">*</span>页面名称
                                </p>
                                {
                                    this.handleType ==='add'?
                                     <input type="text" value={this.currentTitle} onChange={event => this.editCurrentTitle(event)} placeholder="请输入30个字以内的页面名称" maxLength="30"/>:
                                     <input type="text" value={this.editTitle} onChange={event => this.getEditCurrentTitle(event)} placeholder="请输入30个字以内的页面名称" maxLength="30"/>
                                }
                            </div>

                            {
                                this.handleType ==='add'?
                                <div class="share-main">
                                    <p class="eidt-slot-title">
                                        <span class="required">*</span>分享主标题
                                    </p>
                                    <input type="text" value={this.shareMainTitle} onChange={event =>this.shareMain(event)} placeholder="请输入10个字以内的分享标题" maxLength="10"/>
                                </div>:
                                <div class="share-main">
                                    <p class="eidt-slot-title">
                                        <span class="required">*</span>分享主标题
                                    </p>
                                    <input type="text" value={this.editShareMainTitle} onChange={event =>this.editShareMain(event)}  maxLength="10"/>
                                </div>
                                
                            }
                            {
                                this.handleType ==='add'?
                                <div class="share-sub">
                                    <p class="eidt-slot-title">
                                        <span class="required">*</span>分享副标题
                                    </p>
                                    <input type="text" value={this.shareSubTitle} onChange={event =>this.shareSub(event)} placeholder="请输入30个字以内的分享副标题" maxLength="30"/>
                                </div>:
                                 <div class="share-sub">
                                    <p class="eidt-slot-title">
                                        <span class="required">*</span>分享副标题
                                    </p>
                                    <input type="text" value={this.editShareSubTitle} onChange={event =>this.editShareSub(event)} placeholder="请输入30个字以内的分享副标题" maxLength="30"/>
                                </div>
                            }


                            <div class="fabu-box" style="margin:20px 0px;">
                            {
                                 this.handleType ==='add'?
                                <blue-btn text="确定" clickEvent={this.addCustPage} style="margin-right:25px;display:inline-block"/>:
                                <blue-btn text="确定" clickEvent={this.confirmEditCustPage} style="margin-right:25px;display:inline-block"/>
                            }
                                <blue-btn text="取消" clickEvent={this.cancelAddPage} style="margin-right:25px;display:inline-block"/>
                            </div>
                        </div>
                    </edit-model>
                    <edit-model ref="CopyModel">
                        <div class="copy-template-box slot-banner" slot="main">
                            <div class="page-copy">
					            <p class="eidt-slot-title">
			                        <span class="required">*</span>复制到门店
                                </p>
                                <m-column-list shopChangeCopy={this.shopChangeCopy} ></m-column-list>
                            </div>
                            <div class="page-type">
					            <p class="eidt-slot-title">
			                        <span class="required">*</span>页面类型
                                </p>
                                <input type="text" value="专题活动" disabled="disabled" style="display:inline-block"/>
				            </div>
				            <div class="page-name">
					            <p class="eidt-slot-title">
						            <span class="required">*</span>页面名称
					            </p>
					            <input type="text" value={this.targetStoreTitle} onChange={event => this.targetStoreTitleEvent(event)} placeholder="请输入30个字以内的页面名称" maxLength="30"/>
                            </div>

                            <div class="main-name">
					            <p class="eidt-slot-title">
						            <span class="required">*</span>分享主标题
					            </p>
					            <input type="text" value={this.targetStoreMainName} onChange={event => this.targetStoreMainNameEvent(event)} placeholder="请输入10个字以内的页面名称" maxLength="10"/>
                            </div>
                            <div class="sub-name">
					            <p class="eidt-slot-title">
						            <span class="required">*</span>分享副标题
					            </p>
					            <input type="text" value={this.targetStoreSubName} onChange={event =>this.targetStoreSubNameEvent(event)} placeholder="请输入30个字以内的页面名称" maxLength="30"/>
                            </div>

                            <div class="fabu-box">
                                <blue-btn text="确定" clickEvent={this.confirmCopyPage} />
                                <blue-btn text="取消" clickEvent={this.cancelCopyPage} />
				            </div>
                        </div>
                    </edit-model>
                    <m-toast ref="toast"></m-toast>
                </div>
            )
        },
        mounted(){
            //进入此页面时执行初始化操作
             console.log('pageArray',this.pageArray)
        }
    }
</script>
<style scoped>
    .sv-table{
            width:100%;
        }
    .definitePage{
            /* padding:10px 0px; */
            padding:0 0 10px 0
        }
    .totalPage{
            background: #fff;
        }
    .el-dropdown{
            width:140px;
        }
    .btn-group{
            display:inline-block
        }
    .el-dropdown-link{
            width: 100px;
            height: 28px;
            border: 1px solid #eee;
            display: inline-block;
            background-color: #3876ae;
            line-height: 28px;
            color: #fff;
            border-radius: 3px;
        }
    .handle .el-dropdown{
        border:none;
    }
    .page-type,.page-name,.page-copy{
        text-align:left;
        margin-bottom:20px;
        width:100%;
    }
    .page-copy .box{
        display: inline-block;
        position: relative;
        float:none;
    }
    .page-copy .box .el-dropdown{
        border:none !important;
        position:absolute;
        top:-10%
    }
    .page-type>p,.page-name>p,.page-copy>p{
        display:inline-block;
    }
    .page-name>input{
        display:inline-block
    }
    .interval-time{
        margin-right:5px;
    }
    .interval-time{
        display: inline-block;
        background: #e1e1e1;
        border-radius: 7px;
        padding: 0 8px;
    }
    .copy-template-box .fabu-box{
        margin:30px 0 30px 0
    }
    .copy-template-box .fabu-box>div{
        display:inline-block;
        margin-right:25px;
    }
    .slot-box .share-main input{
        width:90%;
        padding:10px 5px;
        margin-bottom:20px;
        margin-top:6px
    }
    .slot-box .share-sub input{
        width:90%;
        padding:10px 5px;
        margin-bottom:20px;
        margin-top:6px;
    }
    .slot-box .page-name input{
        width:90%;
        padding:10px 5px;
    }
    .slot-box .share-main input::-webkit-input-placeholder{
        color: #c1c1c1;
        padding-left:5px;
    }
    .slot-box .share-sub input::-webkit-input-placeholder{
        color: #c1c1c1;
        padding-left:5px;
    }
    .slot-box .page-name input::-webkit-input-placeholder{
        color: #c1c1c1;
        padding-left:5px;
    }
    .slot-box .main-name input{
        width:90%;
        padding:10px 5px;
        margin-bottom:20px;
        margin-top:6px
    }
    .slot-box .sub-name input{
        width:90%;
        padding:10px 5px;
        margin-bottom:20px;
        margin-top:6px;
    }
    .slot-box .main-name input::-webkit-input-placeholder{
        color: #c1c1c1;
        padding-left:5px;
    }
    .slot-box .sub-name input::-webkit-input-placeholder{
        color: #c1c1c1;
        padding-left:5px;
    }
</style>

